<template>
  <div class="app-container">
    <!-- 表格 -->
    <el-card class="box-card">
      <img
        class="watermark"
        v-if="baseApi== 'https://testouhun.wm2177.com'"
        style="right: 0;"
        src="@/assets/watermark.png"
      />

      <el-button type="primary" @click="add" size="small" style="margin-bottom: 20px">新增</el-button>
      <el-table
        :data="tableData"
        :header-cell-style="{background:'#eee'}"
        border
        v-loading="loading"
        style="width: 100%;margin-bottom: 20px;"
      >
        <el-table-column align="center" prop="id" label="ID"></el-table-column>
        <el-table-column align="center" prop="name" label="奖品名称"></el-table-column>
        <el-table-column align="center" prop="num1" label="1级石头数量"></el-table-column>
        <el-table-column align="center" prop="num2" label="2级石头数量"></el-table-column>
        <el-table-column align="center" prop="num3" label="3级石头数量"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="160">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              style="margin-right: 10px;"
              @click="handleEdit(scope.row)"
            >编辑</el-button>

            <el-popconfirm
              confirmButtonText="好的"
              cancelButtonText="不用了"
              icon="el-icon-info"
              iconColor="red"
              title="这是一段内容确定删除吗？"
              @onConfirm="handleDel(scope.row)"
            >
              <el-button slot="reference" type="text" size="mini" style="color: red;">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align:right">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="query.currentPage"
          :total="query.total"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getToken } from '@/api/qiniu'
import { categoryList } from '@/api/product'

import { lists, del } from '@/api/feedback'

export default {
  name: 'BoxRewardList',
  data() {
    return {
      baseApi: process.env.VUE_APP_BASE_API,
      // 分页数据
      dialogVisible: false,
      loading: false,
      tableData: [],
      query: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    add() {
      this.$router.push({
        name: 'AddFeedback'
      })
    },
    handleEdit(row) {
      this.$router.push({
        name: 'AddFeedback',
        query: { id: row.id, title: '编辑' }
      })
    },
    async handleDel(row) {
      const res = await del({
        id: row.id
      })
      if (res.st == 1) {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.init()
      } else {
        console.log(res)
        this.$message.error(res.msg)
      }
    },
    handleClose() {
      this.dialogVisible = false
    },
    currentChange(val) {
      this.query.currentPage = val
      this.init()
    },
    async init() {
      const res = await lists({
        page: this.query.currentPage,
        limit: this.query.pageSize
      })
      this.loading = false
      this.total = res.count
      this.tableData = res.data
      console.log(res, 'resresresresresresres')
    }
  }
}
</script>

